<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用jsx创建虚拟dom</title>
  </head>

  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- 此处要写babel -->
    <script type="text/babel">
      //1.创建虚拟dom，此处一定不要写引号，因为不是字符串
      const vdom = (
        <h1 id="title">
          <span>hello react</span>
        </h1>
      );
      //2.渲染虚拟dom到页面
      // reactDOM.render(虚拟dom,容器)
      ReactDOM.render(vdom, document.getElementById("test"));
    </script>
  </body>
</html>
